<template>
    <div class="professor_gzjl">
       <!-- <router-view/>-->
        <div class="layout">
            <div class="table">
                <div>
                    <div><h3>工作经历管理</h3></div>
                     <div>

    <!-- 卡片视图区域 -->
    <el-card style="margin-top: 20px">
        <el-row :gutter="20">
            <!-- 新增按钮 -->
          <el-col :span="8">
              <el-button
                type="success"
                @click="adds()"
                icon="el-icon-circle-plus"
                >新增</el-button>
          </el-col>
        </el-row>

        <!-- 动态用户列表 -->
        <el-table :data="tableData" stripe style="width: 100%" border >
          <el-table-column v-for="column in columns" :key='column.field'
          	:label="column.title" :prop="column.field" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="editShow(scope.row)" type="warning" size="mini">修改</el-button>
              <el-button @click="del(scope.row)" type="danger" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
		
        <!-- 添加弹出框 -->
        <el-dialog title="新增账号" :visible.sync="el_show" :append-to-body="true">
          <el-form :model="work">
        	<el-form-item label="编号">
        	  <el-input
        	    placeholder="请输入工作编号"
        	    v-model="work.id"
        	    autocomplete="off"
        	  ></el-input>
        	</el-form-item>
			<el-form-item label="工作单位">
			  <el-input
			    placeholder="请输入工作单位"
			    v-model="work.company"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>
			<el-form-item label="工作岗位">
			  <el-input
			    placeholder="请输入工作岗位"
			    v-model="work.post"
			    autocomplete="off"
			  ></el-input>
			</el-form-item>
			<el-form-item label="开始时间">
			    <el-col :span="11">
			      <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="work.startDate"></el-date-picker>
			    </el-col>
			  </el-form-item>
			  <el-form-item label="结束时间">
			      <el-col :span="11">
			        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="work.endDate"></el-date-picker>
			      </el-col>
			    </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="edit()">保 存</el-button>
            <el-button @click="err()">取 消</el-button>
          </div>
        </el-dialog>

     
      <!-- 分页 -->
<!--      <el-pagination layout="total, sizes, prev, next, pager, jumper"
      	@size-change="sizeChange"
      	@current-change="currentChange"
      	:page-sizes="[2, 5, 10, 50]" :page-size="2" :total="total" >
      </el-pagination> -->
	  
    </el-card>
  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
	import axios from 'axios';
export default {
  data() {
    return {
		columns:[
			{title:"编号",field:"id"},
			{title:"工作单位",field:"company"},
			{title:"工作岗位",field:"post"},
			{title:"开始日期",field:"startDate"},
			{title:"结束日期",field:"endDate"},
		],
		tableData:[{id:"1",company:"百度",post:"java开发",startDate:"2020-12-23",endDate:"2022-12-23"},
		{id:"2",company:"阿里",post:"sql开发",startDate:"2021-12-23",endDate:"2023-12-23"},
		{id:"3",company:"网易",post:"web开发",startDate:"2022-12-23",endDate:"2024-12-23"}],
		el_show: false,
		resumeid:"102",
		modify:"0",
		work:{
			id:"",
			company:"",
			post:"",
			startDate:"",
			endDate:"",			
			resumeid:"",
			isdelete:false,			
			},
		}
  },
  mounted() {
		this.list();
  },methods: {
	  list(){
		  axios.get("http://localhost:9001/resume-work-experience/list",
		  {params:{
			  resumeid:this.resumeid
		  }}).then((response)=>{
			  console.log(response.data);
			  this.tableData=response.data;
		  });
	  },
    err: function () {
		console.log("hello"),
		console.log(this.work.startDate),
		this.el_show = false

    },
	adds(){
		this.modify="0",
		this.work.id="",
		this.work.company="",
		this.work.post="",
		this.work.startDate=null,
		this.work.endDate=null,		
		this.work.resumeid=this.resumeid,
		this.work.isdelete=false,
		this.el_show=true;
	},
	edit(){
		//新增或修改提交 post
		axios.post("http://localhost:9001/resume-work-experience/edit",
		{
			id:this.work.id,
			company:this.work.company,
			post:this.work.post,
			startDate:this.work.startDate,
			endDate:this.work.endDate,
			modify:this.modify,
			resumeid:this.work.resumeid,
			isdelete:this.work.isdelete
		}).then((response)=>{
			console.log(response);
			//更新列表 
			this.list();
			
			this.el_show=false;
		});
	},
	editShow(v){
		console.log(v.id);
		axios.get("http://localhost:9001/resume-work-experience/getById",
		{
			params:{id:v.id},
		}).then((response)=>{
			console.log(response.data);
			this.work=response.data;
			this.modify=1;
			this.el_show=true;
		});
	},
	del(v){
		console.log(v.id);
		//是否删除
		if(confirm("是否删除?")){
			//删除请求 empno
			axios.get("http://localhost:9001/resume-work-experience/del",{
				params:{
					id:v.id,
					},}).then((response)=>{
				console.log(response);
				//更新列表 
				this.list();
			})
		}
	}
  }
}
</script>
<style scoped>
    h2,h3{
        width: 150px;
        margin: 20px auto;
    }
    .professor_gzjl{
        width: 100%;
        height: 100%;
    }
    .layout{
        width: 100%;
        height: 100%;
    }
    .table{
        width: calc(100% - 100px);
        margin: 0 50px;
        padding: 0 10px;
        height: 100%;
        border: 1px solid #000;
        background-color: #EFEFEF;
    }
    .one{
        width: calc(100% - 40px);
        height: 50px;
        display: flex;
        margin: 20px;
        align-items: center;
        background-color: #ffffff;
        border: 1px solid #000;
    }
    .one input{
        margin: 0 20px;
    }
    .two{
        width: 100%;
    }
</style>